<template>
  <div class="container">
    <div class="search-box">
      <van-search
        :value='keyword'
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox"
      >
        <div class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</div>
      </van-search>
    </div>
    <div class="height-44"></div>
    <div>
      <div>
        <div class="pull-refresh pad-b-4">
          <div v-for="(item, index) in orders" :key="index">
            <div class="order-div mar-b-10 pad-t-19 pad-b-10 pad-l-15 pad-r-15">
              <div class="flex v-align-c mar-b-14">
                <div v-if="item.crossBorderOrderType === 2" class="ordet-type-tag mar-r-5">跨境保税</div>
                <div v-else class="ordet-type-tag mar-r-5">{{item.deliveryTypeText}}</div>
                <label @click="goHome(item.memberId)" class="flex-item">
                  <div class="flex v-align-c">
                    <span>
                      <span>{{item.storeName}}</span>
                      <span v-if="!getAppInfo.groupBuyAuthority || !getAppInfo.storeHomeAuthority">的店铺</span>
                    </span>
                    <icon class="iconfont icon-arrow-right font-12 mar-l-6"></icon>
                  </div>
                </label>
                <div class="font-orange font-14" :class="'type-' + item.orderStatus" v-if="item.deliveryType ===4 && item.orderStatus ===2">待提货</div>
                <div class="font-orange font-14" :class="'type-' + item.orderStatus" v-else>{{item.curStatusText}}</div>
              </div>
              <div>
                <div v-for="(goods, goodsIndex) in item.orderGoodsList" :key="goodsIndex"
                    @click="queryOrderInfo(item)">
                  <div class="barbg pad-t-10 pad-b-10 pad-l-20 pad-r-20 mar-l--20 mar-r--20">
                    <div class="flex">
                      <div class="mar-r-10">
                        <img :src="goods.goodsImageUrl" class="img-item"/>
                      </div>
                      <div class="flex-item">
                        <div class="height-81">
                          <div class="goods-title mar-t--2">{{goods.goodsTitle}}</div>                        
                          <div class="height-3"></div>
                          <div v-if="goods.skuDetail" class="goods-prop font-color-9 font-12">{{ goods.skuDetail }}</div>
                          <div v-if="goods.taxAmount && (goods.taxAmount * 1 > 0)" class="goods-prop font-color-crossb font-12">税费：￥{{ goods.taxAmount }}</div>
                        </div>
                        <div class="flex font-13">
                          <div class="font-black flex-item">
                            <div class="flex v-align-c font-16 price-col-n">
                              <span class="flex-item">¥{{ goods.goodsPrice }}</span>
                              <span>×{{ goods.goodsNum }}</span>
                            </div>
                          </div>
                        </div>
                        <!--  退款关闭: -3、4、3（数量全退完）
                            退款：-2、-1、3(数量未退完)、''
                            退款中：0、1、2 -->
                        <div class="flex mar-t-5">
                          <div class="flex-item"></div>
                          <template v-if="urlFrom !== 'myDistribution'">
                            <template v-if="item.orderStatus !== -2 && item.orderStatus !== -1 && item.orderStatus !== 0 && item.orderStatus !== 4">
                              <div @click.stop="linkToDetail(goods)"
                                v-if="!goods.afterSaleGoodsNum && (goods.afterSaleStatus===0 || goods.afterSaleStatus===1 || goods.afterSaleStatus===2 )">
                                <div class="action-btn font-13 mar-b-2">退款中</div>
                              </div>
                              <div class="action-btn font-13 mar-b-2" @click.stop="linkToDetail(goods)"
                                v-else-if="goods.afterSaleStatus===-3 || goods.afterSaleStatus===4 || (goods.afterSaleStatus===3 && (goods.afterSaleGoodsNum <= goods.goodsNum))">退款成功</div>
                            </template>
                          </template>
                        </div>
                      </div>
                    </div>
                    <div class="border-b-less2 mar-t-8 mar-b--5"></div>
                  </div>
                  <div v-if="(item.orderGoodsList.length === 1) || (item.orderGoodsList.length>1 && goodsIndex === item.orderGoodsList.length -1)">
                    <div v-if="item.moreGoods" class="flex flex-center font-12 pad-t-10" @click="queryOrderInfo(item)">查看更多 ></div>
                    <div class="flex border-b pad-t-5 pad-b-3 font-15 mar-b-10">
                      <span class="flex-item">共{{ item.orderGoodsList ? item.goodsLength : 0 }}件</span>
                      <div class="text-align-r">
                        <div>
                          合计：
                          <span class="font-red">
                            <span class="font-11">¥</span>{{ item.orderPrice }}
                          </span>
                        </div>
                        <div class="font-12 mar-t--4" v-if="item.deliveryType === 1">
                          <span>(含</span>
                          <span v-if="item.taxAmount && (item.taxAmount * 1 > 0)">税费¥{{ item.taxAmount }}，</span>
                          <span>运费¥{{ item.freight }}</span>
                          <span>)</span>
                        </div>
                        <div class="font-12 mar-t--4" v-if="item.deliveryType === 5">(含配送费¥{{ goods.deliveryFee ? goods.deliveryFee : '0.00' }})</div>
                      </div>
                    </div>
                  </div>
                </div>                
              </div>
              <div class="flex">
                <div class="flex-item"> </div>
                <div class="mar-r--10">
                  <!-- orderStatus 订单状态： -10: 待付货款 -2: 已付款取消 -1: 未付款取消 0: 未付款 1: 已付款 20: 部分发货 2: 已发货 3: 已收货 4: 已完成 -->
                  <!-- deliveryNo：针对社区商品、deliveryNo不为空 说明已生成配送单号 就不能再取消 -->
                  <!-- cancelFlag 已付款订单是否发起取消 0：否 1：是 -->
                  <!-- deliveryType ：1和2 社群分销  3 社区团购  4和5 门店 -->
                  <!-- orderFrom 订单归属 1:自营订单 2:分销订单 -->
                  <!-- 取消按钮： 显示条件： 待付款、待发货状态下 -->
                  <!-- 跨境订单时，并且待发货时，（仓库报关状态 = 申请失败）|| （支付报关状态 = 申请失败） 或者 （仓库报关状态 = 未申报）&& （支付报关状态 = 未申报），这是展示取消订单 -->
                  <span v-if="(item.deliveryType ===4 || item.deliveryType ===5) && ((item.orderStatus===0))"
                    class="order-btn mar-r-10" @click.stop.prevent="cancelOrder(item)">取消订单</span>
                  <span v-if="(item.deliveryType ===3 && !item.deliveryNo) && (item.orderStatus===0 || (item.orderStatus === 1 && item.cancelFlag === 0 && item.orderFrom === 2))"
                    class="order-btn mar-r-10" @click.stop.prevent="cancelOrder(item)">取消订单</span>
                  <span v-if="((item.deliveryType ===1 || item.deliveryType ===2)) && ((item.crossBorderOrderType !== 2 && item.orderStatus === 0) || (item.crossBorderOrderType !== 2 && item.orderStatus === 1 && item.cancelFlag === 0 && item.orderFrom === 2) || (item.crossBorderOrderType === 2 && item.orderStatus === 1 && ((item.warehouseCustomsStatus === 4 || item.paymentOrderCustomsStatus === 7) || (item.warehouseCustomsStatus === 1 && item.paymentOrderCustomsStatus === 1) ) ))"
                    class="order-btn mar-r-10" @click.stop.prevent="cancelOrder(item)">取消订单</span>
                  <!-- 查看物流按钮 只有原社群分销商品有： 显示条件： 待收货、已收货、已完成 -->
                  <!-- 订单商品类型orderGoodsDeliveryType： 10：微店商品快递配送 11： 微店商品门店自提  20: 分销商品快递配送 30:微店商品+分销商品快递配送 -->
                  <span v-if="(item.orderStatus===4 || item.orderStatus===3 || item.orderStatus===2) && item.orderGoodsDeliveryType!==11 && item.deliveryType ===1" class="order-btn mar-r-10"
                          @click.stop.prevent="queryExpress(item)">查看物流
                  </span>
                  <!-- 分销订单 根据运营总后台客服增值功能来显示和隐藏  customerServiceType客服类型 1：小B客服 2：企业客服-->
                  <span class="order-btn mar-r-10 pos-rel" v-if="(item.orderFrom === 2 && enterpriseCustomerServiceAuthority === 1)">
                    <!-- 跳企业客服 -->
                    <button open-type="contact" class="contactBtn hidden-submit button-icon" v-if="item.customerServiceType === 2"></button>
                    <!-- 跳小B客服 -->
                    <div class="contactBtn hidden-submit button-icon" v-if="item.customerServiceType === 1"
                    @click.stop.prevent="goServiceToB(item)"></div>
                    联系客服
                  </span>
                  <!-- 自营订单 根据小B客服增值功能来显示和隐藏 -->
                  <span class="order-btn mar-r-10 pos-rel" v-if="(item.orderFrom === 1 && shopCustomerServiceAuthority === 1)"
                    @click.stop.prevent="goServiceToB(item)">
                    联系客服
                  </span>
                  <span v-if="item.orderStatus===0" class="order-btn2 mar-r-10" @click="queryOrderInfo(item)">去付款</span>
                  <!-- 确认收货按钮 显示条件 只有物流商品有： 待收货 -->
                  <span v-if="(item.orderStatus===2 && (item.deliveryType ===1 || item.deliveryType ===2)) && item.statusOverNum !== item.goodsListLen && item.orderGoodsDeliveryType!==11" 
                    class="order-btn2 mar-r-10" @click.stop.prevent="doReceiveGoods(item)" >
                    确认收货
                  </span>
                  <!-- 取货码按钮 显示条件 社区和到店自提商品：待收货  -->
                  <span class="order-btn mar-r-10" @click.stop.prevent="getCodeInfo(item)" v-if="(item.deliveryType === 2 || item.deliveryType === 3 || item.deliveryType === 4) && (item.orderStatus === 1 || item.orderStatus ===2) && item.orderGoodsDeliveryType === 11">
                    取货码
                  </span>
                  <!-- 10：微店商品快递配送 11： 微店商品门店自提 20: 分销商品快递配送 30:微店商品+分销商品快递配送 -->
                  <!-- <span v-if="(item.orderStatus === 1 || item.orderStatus ===2) && item.orderGoodsDeliveryType === 11" class="order-btn2 mar-r-10" @click.stop.prevent="pickUpEls(item.orderId)">我要取货</span> -->
                </div>
              </div>
            </div>
          </div>
          <div class="pad-10 mar-t-10 align-c" v-if="orders.length===0">
            <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30"
                :src="fileSpace + '/images/2-0-kong.png'"/>
            <div class="pad-t-20 font-14 font-gray">空空如也</div>
          </div>
        </div>
        <div class="nodata" v-if="shopSortNull">
          <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-274 height-65" alt="">
          <div class="align-c mar-t-20 font-16 font-color-6">
            暂无分类~
          </div>
        </div>
      </div>
    </div>
    <div class="nodata" v-if="searchNull">
        <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
        <div class="align-c mar-t-20 font-16 font-color-6">
        暂时还没有您搜索的内容~
        </div>
    </div>
    <!-- 二维码 -->
    <div class="code-box">
      <van-popup :round="true" :show="showCodeAlert" @close="showCodeAlert = false">
        <div class="width-300">
          <div class="width-300 height-127 alert-bg pad-t-5 text-align-c" v-if="codeInfo.deliveryType === 3">
            <span class="font-21 font-white font-w">{{appName}}</span>
            <div class="font-12 font-white flex mar-t-1">
              <span class="flex subject" style="margin-left:41px"><span class="dots"></span>货源直采</span>
              <span class="flex subject mar-l-28"><span class="dots"></span>品质保证</span>
              <span class="flex subject mar-l-27"><span class="dots"></span>便宜省心</span>
            </div>
          </div>

          <div v-if="codeInfo.deliveryType === 4" class="flex-col flex-center mar-t-18">
            <span class="font-15 font-color font-w mar-b-17">请向商家出示提货码</span>
            <span class="font-20 font-w">{{codeInfo.verifyId}}</span>
          </div>
          <div class="width-275 height-283 code-area flex-col flex-center" :style="{top: codeInfo.deliveryType === 3 ? '-57px':'15px'}">
            <div v-if="codeInfo.deliveryType === 3" class="pad-t-10 pad-b-10">
              <span class="font-20 font-w">{{codeInfo.verifyId}}</span>
            </div>
            <img class="width-244 height-244" v-if="codeInfo.verifyCode" :src="codeInfo.verifyCode" alt="">
          </div>
          <div v-if="codeInfo.deliveryType === 3" class="font-15 font-color text-align-c remark-text font-w">
            <span>请向团长展示此二维码</span>
          </div>
          <div v-if="codeInfo.deliveryType === 4" class="font-15 font-color text-align-c font-w mar-b-20" style="margin-top:34px">
            <span>请向店主展示此二维码</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import {
  pageCustomerOrder,
  pageUserOrder,
  cancelOrder,
  checkCancelPaidOrder,
  doReceiveGoods
} from '@/api/personal'
import {
  pageProjectOrderByMemberId
} from '@/api/distribution'
import { getDict, getAuthority } from '@/api/common'
export default {
  data() {
    return {
      keyword: '',
      currentPage: 1,
      pullLoad: {
        loading: false,
        finished: false
      },
      orders: [],
      searchNull: false,
      orderStatusMap: {},
      shopCustomerServiceAuthority: 1, // 小B客服增值功能 0关闭 1开启
      enterpriseCustomerServiceAuthority: 1, // 企业客服增值功能 0关闭 1开启
      showCodeAlert: false,
      codeInfo: {
        deliveryType: '',
        verifyCode: '',
        verifyId: ''
      },
      searchType: '',
      deliveryType: '', // 配送方式 1：物流快递 2: 门店自提 4:社区自提 5:门店配送  门店自提---自营商品
      deliveryTypeArr: ['物流快递', '门店自提', '社区团购', '到店自提', '门店配送'],
      globalStyle: {},
      appName: '',
      backDetailUrl: '/pages/personal/main',
      getAppInfo: {}
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    let getAppInfo = this.$pt.getStorageSync('appInfo')
    this.getAppInfo = getAppInfo
    this.appName = getAppInfo.appName
    this.globalStyle = getAppInfo.style
    this.appName = getAppInfo.appName
    this.searchType = this.getCurrentPage().query.searchType
    this.getOrderDic()
    // this.keyword = '灰色'
    // this.pageBuyerOrder()
    this.getAuthority()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageUserOrder()
    }
  },
  methods: {
    // 跳小B客服聊天窗口
    goServiceToB(item) {
      let cId = this.$pt.getStorageSync('customerId')
      let mId = item['memberId']
      if (cId === mId) {
        this.$utils.showToast({
          title: '不能与自己聊天'
        })
      } else {
        this.$pt.navigateTo({url: '/pages/personal/message/detail/main?memberId=' + item.memberId + '&orderId=' + item.orderId + '&orderType=' + item.orderType})
      }
    },
    // 运营总后台 增值功能权限获取
    getAuthority() {
      getAuthority({enterpriseId: this.getEnterpriseId}).then(res => {
        this.shopCustomerServiceAuthority = res.data.shopCustomerServiceAuthority
        this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
      }).catch(err => {
        console.log(err)
      })
    },
    getCodeInfo(item) {
      this.showCodeAlert = true
      this.codeInfo.deliveryType = item['orderGoodsList'][0]['deliveryType']
      this.codeInfo.verifyCode = item['orderGoodsList'][0]['verifyCode']
      this.codeInfo.verifyId = this.codeInfo.deliveryType === 4 || this.codeInfo.deliveryType === 3 ? item['orderGoodsList'][0]['verifyId'] : ''
    },
    linkToDetail(sku) {
      let value = JSON.stringify(sku)
      this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?sku=${value}`})
    },
    goShop(memberId) {
      this.$utils.setMyId(memberId)
      this.$root.$mp.appOptions.query = {}
      this.$pt.reLaunch({ url: '/pages/shop/main' })
    },
    doReceiveGoods(order) {
      if (order.orderStatus === 20) return
      const that = this
      this.$pt.showModal({
        content: '是否确认收货？',
        success(res) {
          if (res.confirm) {
            doReceiveGoods({
              memberId: order.memberId,
              orderId: order.orderId,
              orderFrom: order.orderFrom
            }).then(response => {
              if (response.isError) return
              that.$utils.showToast({ title: '确认收货成功' })
              that.orders = []
              that.currentPage = 1
              that.pullLoad.finished = false
              that.pageBuyerOrder()
            })
          } else if (res.cancel) {
            console.log('用户取消')
          }
        }
      })
    },
    cancelOrder(item) {
      // 取消订单事件
      // 订单里面都没有发货才可以取消订单，到订单取消页面
      // 否则提示联系卖家处理
      if (item.orderStatus === 0) {
        const that = this
        this.$pt.showModal({
          title: '温馨提示',
          content: '确认取消订单?',
          success: res => {
            if (res.confirm) {
              cancelOrder({orderId: item.orderId, orderFrom: item.orderFrom}).then(response => {
                if (response.isError) return
                that.$utils.showToast({ title: '取消成功' })
                item.orderStatus = -1
              })
            }
          }
        })
      } else {
        checkCancelPaidOrder({orderId: item.orderId, orderFrom: item.orderFrom}).then(response => {
          if (response.isError) return
          this.$pt.navigateTo({url: '/pages/personal/order/cancel-order/main?memberId=' + item.memberId + '&orderId=' + item.orderId})
        })
      }
    },
    queryOrderInfo(order) {
      if (order.orderFrom === 1) {
        // 自营订单
        this.$pt.navigateTo({ url: '/pages/personal/order/detail/main?orderId=' + order.orderId + '&orderFrom=' + order.orderFrom })
      } else {
        // 分销订单
        this.$pt.navigateTo({ url: '/pages/personal/distribution/order/detail/main?orderId=' + order.orderId +
           '&personalType=0&orderFrom=' + order.orderFrom })
      }
    },
    // 买家
    pageBuyerOrder() {
      const params = {
        customerMemberId: this.getCustomerId,
        orderStatusInfo: '',
        currentPage: this.currentPage,
        keyword: this.keyword,
        size: 10
      }
      pageCustomerOrder(params).then((response) => {
        if (response.isError) return
        response.data.records.forEach(item => {
          item.moreGoods = false
          if (item.orderGoodsList.length > 2) {
            item.moreGoods = true
            item.orderGoodsList.length = 2
          }
          if ('deliveryType' in item) {
            let index = item.deliveryType - 1
            this.$set(item, 'deliveryTypeText', this.deliveryTypeArr[index])
          }
          this.$set(item, 'curStatusText', this.orderStatusMap[item.orderStatus])
          this.orders.push(item)
        })
        this.currentPage++
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    // 卖家自营
    pageSellSelfOrder() {
      const params = {
        memberId: this.getCustomerId,
        orderStatus: '',
        currentPage: this.currentPage,
        orderType: 10,
        keyword: this.keyword,
        size: 10
      }
      this.$pt.showLoading({
        title: '加载中',
        mask: true
      })
      pageUserOrder(params).then((response) => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.currentPage++
        response.data.records.forEach(item => {
          this.orders.push(item)
        })
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    // 卖家分销
    pageProjectOrderByMemberId() {
      const params = {
        memberId: this.getCustomerId,
        orderStatusList: '',
        currentPage: this.currentPage,
        keyword: this.keyword,
        size: 10
      }
      pageProjectOrderByMemberId(params).then((response) => {
        if (response.isError) return
        response.data.records.forEach(item => {
          item.moreGoods = false
          if (item.orderGoodsList.length > 2) {
            item.moreGoods = true
            item.orderGoodsList.length = 2
          }
          this.orders.push(item)
        })
        this.currentPage++
        if (this.orders.length === 0 || this.orders.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    },
    getOrderDic() {
      getDict('UserOrderDTO.orderStatus').then((response) => {
        if (response.isError) return
        this.orderStatusMap = response.data.orderStatus
      }).catch(() => {
      })
    },
    resetData() {
      // 重置数据
      this.searchNull = false
      this.currentPage = 1
      this.orders = []
      this.pullLoad.finished = false
    },
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.keyword = e.mp.detail
      this.resetData()
      switch (this.getCurrentPage().query.searchType) {
        case 'buyer':
          // 买家
          this.pageBuyerOrder()
          break
        case 'seller-self':
          // 卖家自营
          this.pageSellSelfOrder()
          break
        case 'seller-other':
          // 卖家分销
          this.pageProjectOrderByMemberId()
          break
      }
    },
    onChangeVal(e) {
      this.keyword = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.resetData()
      switch (this.getCurrentPage().query.searchType) {
        case 'buyer':
          // 买家
          this.pageBuyerOrder()
          break
        case 'seller-self':
          // 卖家自营
          this.pageSellSelfOrder()
          break
        case 'seller-other':
          // 卖家分销
          this.pageProjectOrderByMemberId()
          break
      }
    },
    pageTo(item) {
      // 跳转详情页
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + item.goodsType})
    }
  }
}
</script>
<style lang="less" scoped>
.code-box {
  .alert-bg {
    background: #FF243D;
    border-radius:0px 0px 10px 10px;
  }
  .subject {
    align-items: center;
    .dots {
      margin-right: 4px;
      width: 4px;
      height: 4px;
      background: #fff;
      border-radius: 50%;
    }
  }
  .code-area {
    background: #fff;
    border-radius: 10px;
    position: relative;
    z-index: 10;
    // top: -57px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
  }
  .remark-text {
    margin-top: -35px;
    margin-bottom: 19px;
  }
}
.container {
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.ordet-type-tag{
  position: relative;
  width: 37px;
  height: 37px;
  background-color: #ff243d;
  color: #FFF;
  line-height: 1.3;
  font-size: 12px;
  // font-weight: bold;
  // letter-spacing: 2px;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 0 0 5px 5px;
  // writing-mode: vertical-rl;
  &::before{
    content: '';
    position: absolute;
    left: -3px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 4px solid #db041d;
    border-left: 3px solid transparent;
  }
  &::after{
    content: '';
    position: absolute;
    right: -3px;
    top: 0px;
    width: 0;
    height: 0;
    border-bottom: 4px solid #db041d;
    border-right: 3px solid transparent;
  }
}
.search-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 9;
  // 对搜索框进行改造
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
.main {
  .main-bar {
    position: relative;
    padding: 0 15px 20px;
    margin-top: 10px;    
  }
}
.type-0{
  color: #f94035;
}
.type-1{
  color: #ff6600;
}  
.type-2{
  color: #409eff;
}
.type-3{
  color: #ff6600;
}
.type-4{
  color: #67c23a;
}
.type--10, .type--11{
  color: #ff6600;
}
.type--1{
  color: #000;
}
.border-b{
  border-bottom: #e4e4e4 1px solid;
}
.barbg{
  background: #fafafa;
}
.orders-border{
  position: relative;
  &:after{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #e6e6e6;
  }
  &:last-child{
    &:after{
      display: none;
    }
  }
}
.goods-prop{
  box-sizing: border-box;
  height: 27px;
  line-height: 1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  word-break:break-word;
}
.order-div {
  background-color: #fff;
  border-radius: 5px;
  font-size: 13px;
}
.goods-title {
  height: 42px;
  font-size: 15px;
  line-height: 1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-word;
}

.img-item {
  width: 100px;
  height: 100px;
}

.order-btn {
  background-color: #fff;
  color: #999999;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
  border: #cccccc 1px solid!important;
}
.order-btn2 {
  border: none!important;
  background: linear-gradient(to right, #fed801, #fcc508);
  background-color: #fff;
  color: #000;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
}

.btn-save {
  background-color: #f8c400;
}

.btn-border {
  border: 1px solid #969896;
  border-radius: 5px;
  height: 20px;
  background-color: #ffffff;
}
.nodata {
  margin-top: 135px;
}
.nodata {
  margin-top: 115px;
}
</style>
